<template>
  <Card>
    <Tabs>
      <TabPane label="充电统计">
        <div>
          <Row>
            <Col span="24">
            <Card>
              <div style="position:relative;">
                <iframe
                  :height="iframeHeight"
                  :src="url1"
                  class="iframe"
                  frameborder="0"
                  scrolling="auto"
                  width="100%"></iframe>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
      <TabPane label="充电登记表">
        <Card>
          <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
            <Form-item label="车辆线路：" prop="line">
              <Select v-model="searchForm.line" clearable filterable placeholder="选择线路" style="width:200px;">
                <Option value="-1">全部</Option>
                <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
            <Form-item label="日期：" prop="date_time">
              <DatePicker
                v-model="searchForm.start_date_time"
                placeholder="请选择开始日期"
                style="width: 200px"
                type="date"
                @on-change="searchForm.start_date_time=$event"></DatePicker>
              <DatePicker
                v-model="searchForm.end_date_time"
                placeholder="请选择结束日期"
                style="width: 200px"
                type="date"
                @on-change="searchForm.end_date_time=$event"></DatePicker>
            </Form-item>
            <Form-item label="充电公司：" prop="department">
              <Select
                v-model="searchForm.department"
                clearable
                filterable
                placeholder="选择线路"
                style="width:200px;"
              >
                <Option value="-1">全部</Option>
                <Option value="国网">国网</Option>
                <Option value="汉水">汉水</Option>
              </Select>
            </Form-item>
            <Form-item style="margin-left:-90px;">
              <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
          <Button
            :disabled="exportBtnDisable"
            icon="md-cloud-download"
            style="margin-bottom:15px"
            type="primary"
            @click="exportChargeStati">导出
          </Button>
          <Table
            :columns="column"
            :data="data"
            :loading="loading"
            border
            size="small"
            stripe></Table>
          <Row class="page" justify="end" type="flex">
            <Page
              :current="searchForm.pageNumber"
              :page-size="searchForm.pageSize"
              :total="total"
              show-total
              @on-change="changePage"/>
          </Row>
        </Card>
      </TabPane>
    </Tabs>
  </Card>
</template>
<script>
import {chargeStatiList} from '../../api/chargeStati'

export default {
  data() {
    return {
      url1:
        'http://116.63.90.219:8075/webroot/decision/view/report?viewlet=%25E5%2585%25AC%25E4%25BA%25A4%25E6%258A%25A5%25E8%25A1%25A8%252F%25E5%2585%2585%25E7%2594%25B5%25E7%25BB%259F%25E8%25AE%25A1.cpt',
      iframeHeight: 0,
      searchForm: {
        line: '-1',
        department: '-1',
        start_date_time: '',
        end_date_time: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      data: [],
      modal: false,
      importLoading: false,
      exportBtnDisable: false,
      total: 0,
      column: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {title: '日期', key: 'date', align: 'center', width: 200},
        {title: '线路', key: 'line', align: 'center', width: 100},
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'center',
          width: 100
        },
        {
          title: '交易金额',
          key: 'total_trading_amt',
          align: 'center',
          width: 120
        },
        {
          title: '交易电量',
          key: 'total_trading_power',
          align: 'center',
          width: 120
        }
      ],
      lines: [],
      materials: [],
      date_text: ''
    }
  },
  watch: {
    $route() {
      this.initUrl()
    },
  },
  mounted() {
    this.getLinesArray()
    this.initUrl()
  },
  methods: {
    initUrl() {
      this.iframeHeight = this.$parent.$el.clientHeight - 255
      const iframe = document.getElementsByClassName('iframe')
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', function () {
        })
      } else {
        iframe.onload = function () {
        }
      }
    },
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getList()
    },
    //导出
    exportChargeStati() {
      const line = this.searchForm.line
      const department = this.searchForm.department
      const start_date_time = this.searchForm.start_date_time
      const end_date_time = this.searchForm.end_date_time
      const material = this.searchForm.material
      let start_date = ''
      let end_date = ''
      if (start_date_time) {
        const start_d = new Date(start_date_time)
        start_date =
          start_d.getFullYear() +
          '-' +
          (start_d.getMonth() + 1) +
          '-' +
          start_d.getDate()
      }
      if (end_date_time) {
        const end_d = new Date(end_date_time)
        end_date =
          end_d.getFullYear() +
          '-' +
          (end_d.getMonth() + 1) +
          '-' +
          end_d.getDate()
      }
      window.location.href =
        '/api/exportChargeStati?line=' +
        line +
        '&department=' +
        department +
        '&start_date_time=' +
        start_date +
        '&end_date_time=' +
        end_date
    },
    getList() {
      if (
        this.searchForm.start_date_time !== '' &&
        this.searchForm.end_date_time !== ''
      ) {
        this.loading = true
        chargeStatiList(this.searchForm).then(res => {
          this.loading = false
          if (res.data) {
            this.data = res.data.result
            this.total = res.data.count
          }
        })
      } else {
        this.$Message.error('请选择:日期范围')
      }
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
  }
}
</script>
